<template>
  <div class="login">
	<el-row class="row-bg" justify="space-around">
	<el-col :span="6"></el-col>
	<el-col :span="5"><div class="grid-content bg-purple-light">
			<div class="login-box">
					  <el-form
						:model="ruleForm"
						status-icon
						:rules="rules"
						ref="ruleRef"
						label-width="100px"
						class="demo-ruleForm"
						>
						<el-form-item label="账号" prop="userNum">
							<el-input type="text" v-model="ruleForm.userNum"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input
							type="password"
							v-model="ruleForm.password"
							autocomplete="off"
							show-password
							></el-input>
						</el-form-item>
						<el-form-item style="margin-left:80px">
							<el-button type="primary" @click="submitForm()">登录</el-button>
						</el-form-item>
						</el-form>
				</div>
		</div></el-col>
	<el-col :span="6"></el-col>
	</el-row>
  </div>
</template>

<script>
import { defineComponent ,ref} from 'vue'
import { postLogin} from '../../api/api';
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
  export default defineComponent({
    setup() {
      var checkUserNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'))
        }else if(value.length<4){
          return callback(new Error('账号不能小于4位'))
		}else if(value.length>8){
          return callback(new Error('账号不能大于8位'))
		}else {
			callback()
		}
      }
      var validatePass = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入密码'))
        }else if(value.length<4){
          return callback(new Error('密码不能小于4位'))
		}else if(value.length>16){
          return callback(new Error('密码不能大于16位'))
		}else {
			callback()
		}
      }
	    const submitForm=() =>{
		// console.log(ruleRef.value.validate);
         ruleRef.value.validate((valid) => {
           if (valid) {
		 	Login()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }

	  //  router全局路由对象
     let router = useRouter()
	  const Login = async() =>{
		const res = await postLogin(ruleForm.value.userNum,ruleForm.value.password)
		console.log(res);
		const { code,data,msg} = res
		if(code === 200 ){
			localStorage.setItem('user',JSON.stringify(data.user))
			localStorage.setItem('token',data.token)
			localStorage.setItem('isLogin',true)
			router.replace('/home')
		}else if(code === 50002){
			 ElMessage.error(msg)
		}else{
			 ElMessage.error(msg)
		}
	  }
	  let ruleForm= ref( {
		  userNum: '',
          password: '',
         
        })
		let rules= ref({
          password: [{ validator: validatePass, trigger: 'blur' }],
          userNum: [{ validator: checkUserNum, trigger: 'blur' }],
        })
		let ruleRef = ref(null)
      return {
        ruleForm,
        rules,
		submitForm,
		Login,
		ruleRef
      }
    }
  })
</script>

<style scoped lang="scss">
//   flex布局
	.login{
		// margin-top: 200px;
		background-size:cover;
		height: 900px;
		margin: 0 20px;
		 background-image:url(~@/assets/bg.jpg);
	}
   .el-row {
        margin-bottom: 20px;
	
        &:last-child {
            margin-bottom: 0;
        }
    }
  .bg-purple-light {
    background: #e5e9f2;
	min-width: 300px;
		margin-top: 150px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
	.login-box{
    	background: #e5e9f2;
		min-width: 200px;
		height: 200px;
		border-radius: 4px;
		 padding: 100px 70px 20px 0px;
		
	}

</style>